<template>
  <div class="bg">
    <nav-com
      :title="$t('userAvtar')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1">
      <div class="all-center">
        <img class="" :src="userImg" alt="">
      </div>

      <van-action-sheet
        v-model="showacvtar"
        :cancel-text="$t('quxiao')"
        close-on-click-action
        @cancel="onCancel"
        @click-overlay="onCancel"
      >
        <div class="content">
          <div class="add-item" v-for="(item,index) in  $t('acvtaractions')" :key="item.id">
            <span  style="height: 100%;" @click="item.id!=3?upload(item.id):downloadimg(userImg,'avtar')">{{item.name}}</span>
          </div>
        </div>
      </van-action-sheet>
    </div>
    <simple-cropper :initParam="uploadParam" :successCallback="uploadHandle" :type="types" ref="cropper2" v-if="types==2">
    </simple-cropper>
    <simple-cropper :initParam="uploadParam" :successCallback="uploadHandle" :type="types" ref="croppers" v-if="types==1">
    </simple-cropper>
  </div>
</template>
<script>
import { Toast } from 'vant';
import navCom from "@/components/nav-com.vue";
import SimpleCropper from '@/components/SimpleCropper.vue'
export default {
  name: "bonusList",
  components: {
    navCom,
    SimpleCropper
  },
  onShow(){
    console.log("====出现了")
    this.showacvtar = true
  },
  data() {
    return {
      showView:true,
      showacvtar:true,
      showPage:true,
      show:true,
      fieldValue:"",
      types:1,
      uploadParam: {
        fileType: 'image/*', // 其他上传参数
        uploadURL: process.env.VUE_APP_BASE_API + '/api/qixing/user/uploadavatar', // 上传地址
        scale: 4 // 相对手机屏幕放大的倍数: 4倍
      },
      // userImg: process.env.VUE_APP_BASE_API + 'test.png',
      userImg:require('@/assets/avatar.png')
    };
  },
  mounted() {
    this.userImg = this.$route.query.canshu
    this.showacvtar = true
    console.log("====出现了")
    this.oldColumns = []
    for (let i=0;i<100;i++){
      this.oldColumns.push({value:i,text:i})
    }
    this.init();
  },
  methods: {
    onCancel(){
      this.$router.go(-1)
    },
    onConfirm1 (value, index) {
      this.regionValue = value[1]
      this.show = false
    },
    //返回
    backHandler() {

      this.$router.go(-1);

    },

    //初始化
    init() {
      console.log("==this.$store.getters.token",this.$store.state.user.token)
    }, // 上传头像
    upload (type) {
      this.types  =  type
      // console.log("========upload" ,this.$refs['croppergraph'].uploadss())
      if(type==1){
        this.$refs.croppers.$refs.graphfile.click()
      } else if (type==2){
        this.$refs.cropper2.$refs.file.click()
      }
    },
    // 上传头像成功回调
    uploadHandle (data) {
      console.log("======fullurl",data)
      if (data.code == '1') {
        this.userImg = data.data.fullurl
        console.log("======this.userImg",this.userImg)
      }
    },
    downloadimg(imgsrc, name){
      //下载图片地址和图片名
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
  },
};
</script>
<style lang="scss" scoped>
.top-view1{
  margin-top: 13.23vw;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.avatar {
  width: 30px;
  height: 30px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.add-item{
  display: block;
  padding: 14px;
  font-size: 16px;
  background-color: #fff;
  border: none;
  cursor: pointer;
  text-align: center;
}
.all-center{
  margin: 10vh auto;
  width: 100vw;
  display: flex;
  justify-content: center;
  img{
    width:30%;
    margin: 10vh auto;
  }
}
</style>
